<template>
  <n-card title="电子签名" size="small" hoverable class="esign-app">
    <vue-esign 
      ref="esign" 
      :width="800" 
      :height="300" 
      :isCrop="config.isCrop" 
      :lineWidth="config.lineWidth" 
      :isClearBgColor="config.isClearBgColor" 
      :lineColor="config.lineColor" 
      :format="config.format" 
      :quality="config.quality" 
      v-model:bgColor="config.bgColor" 
    />
    <div class="esign-bottom">
      <n-button type="warning" @click="handleReset">清空画板</n-button>
      <n-button type="success" @click="handleGenerat">生成图片</n-button>
    </div>
  </n-card>
</template>

<script setup name="EsignCom" lang="ts">
import vueEsign from '../VueEsign/index.vue';
import { reactive, ref } from 'vue';
import { toRefs } from '@vueuse/shared';
import {
  downloadByBase64,
} from '@/utils/download';

const esign = ref();
const data = reactive({
  config: {
    width: 800, // 画布宽度，即导出图片的宽度
    height: 300, // 画布高度，即导出图片的高度
    lineWidth: 4, // 画笔粗细
    lineColor: '#000000', // 画笔颜色
    isClearBgColor: false, // 清空画布时(reset)是否同时清空设置的背景色(bgColor)
    bgColor: 'rgb(209 164 164 / 8%)', // 画布背景色，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
    isCrop: true, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分,
    format: 'image/png', // 生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
    quality: 1 // 生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
  }
})
const resultImg = ref('');

const { config } = toRefs(data);

const handleReset = () => {
  esign.value.reset();
};
const handleGenerat = () => {
  esign.value.generate().then((res:string) => {
    resultImg.value = res;
    downloadByBase64(res, '签名.png');
  }).catch((err:any) => {
    alert(err) // 画布没有签字时会执行这里 'Not Signned'
  })
}
</script>

<style lang="scss" scoped>
.esign-app {
  margin: 0 auto;
  width: 800px;
}
.esign-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 150px 0 150px;
}
</style>
